<template>
  <div ref="dom"></div>
</template>

<script>
  import echarts from 'echarts'
  import {on, off} from '@/libs/tools'

  export default {
    name: 'serviceRequests',
    props: {
      series: {
        type: Array,
        default: () => {
          return []
        }
      },
      maxValue: {
        type: Number,
        default: 100
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dom: null,
        option: {}
      }
    },
    methods: {
      resize() {
        this.dom.resize()
      },
      reDraw() {
        console.log(this.series)
        this.option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: '3%',
            left: '1.2%',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'time',
              boundaryGap: false,
              axisPointer: {
                snap: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisPointer: {
                snap: false
              }
            }
          ],
          series: this.series,
          legend: {
            tyle: 'plain',
            right: '10%',
            top: '10%'
          }
        }
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom)
          this.dom.setOption(this.option)
          on(window, 'resize', this.resize)
        })
      }
    },
    mounted() {
      this.reDraw()
    },
    watch: {
      series() {
        this.reDraw()
      },
      loading(val){
        if (val){
          this.dom.showLoading()
        } else{
          this.dom.hideLoading()
        }
      }
    },
    beforeDestroy() {
      off(window, 'resize', this.resize)
    }
  }
</script>
